<template>
  <div class="edit_container">
    <quill-editor
      style="height: 400px;"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { addQuillTitle } from "../common/md";
export default {
  components: {
    quillEditor
  },
  props: {
    inputContent: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      content: "",
      editorOption: {}
    };
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange($event) {
      this.$emit("mdContent", this.content);
    } // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  created() {
    setTimeout(() => {
      this.content = this.inputContent;
    }, 1000);
  },
  mounted() {
    addQuillTitle();
  }
};
</script>